<template>
    <div class="product-list" v-loading="loading">
        <div class="product-item" v-for="item in renderList" :key="item.id">
            <div class="product-content">
                <div class="product-img">
                    <NuxtImg fit="cover" class="cover-img" :src="item.file +
                        '?x-oss-process=image/watermark,image_' +
                        toBase64(
                            'water/logo_white.png?x-oss-process=image/resize,P_30'
                        ) +
                        ',g_center,t_60/format,webp'
                        " loading="lazy" alt="北京华锐云空间" />

                    <div class="preview">
                        <div class="btn btn-plain" @click="onPreview(item, item.templatestype_id || props.type)">点击预览</div>

                        <el-button class="btn-jump" color="#fff" type="primary" @click.stop="onMakeSame(
                            item,
                            item.templatestype_id || props.type
                        )">
                            制作同款
                        </el-button>
                    </div>

                    <div class="review-num">
                        <img :src="`${_oss_}images/works/icon-view-white.png`" alt="北京华锐云空间" />
                        <span>{{ item.page_view || 0 }}</span>
                    </div>
                </div>

                <div class="product-info">
                    <div class="product-top">
                        <img class="avatar" @click="GoToPageHome(item.consumer_id)"
                            :src="item.user.avatar || _defaultAvatar_" />

                        <div class="product-name" :title="item.name">
                            {{ item.name }}
                        </div>

                        <img class="share-btn" :src="`${_oss_}images/template/icon-share.png`"
                            @click="onShare(item, item.templatestype_id || props.type)" />
                    </div>

                    <div class="product-middle">
                        <div class="icon-group">
                            <div class="icon-item like-item" :class="{ active: item.is_like }" @click="onLike(item)">
                                <img v-if="item.is_like" :src="`${_oss_}images/works/icon-like-2-active.png`"
                                    alt="北京华锐云空间" />
                                <img v-else :src="`${_oss_}images/works/icon-like-2.png`" alt="北京华锐云空间" />
                                <span>{{ item.like || 0 }}</span>
                            </div>

                            <div class="icon-item star-item" :class="{ active: item.is_star }" @click="onStar(item)">
                                <img v-if="item.is_star" :src="`${_oss_}images/works/icon-star-2-active.png`"
                                    alt="北京华锐云空间" />
                                <img v-else :src="`${_oss_}images/works/icon-star-2.png`" alt="北京华锐云空间" />
                                <span>{{ item.star || 0 }}</span>
                            </div>

                            <div class="icon-item comment-item" @click="onComment(item)">
                                <img :src="`${_oss_}images/works/icon-comment-2.png`" alt="北京华锐云空间" />
                                <span>{{ item.comment || 0 }}</span>
                            </div>

                            <div class="icon-item share-item">
                                <img :src="`${_oss_}images/works/icon-share-2.png`" alt="北京华锐云空间" />
                                <span>{{ item.share || 0 }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="product-desc">
                        {{ item.introduce }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="see-more" v-if="props.max && props.list.length > props.max" @click="isExpand = !isExpand">
        {{ isExpand ? "收起" : "查看更多" }}
        <el-icon>
            <ArrowUp v-if="isExpand" />
            <ArrowDown v-else />
        </el-icon>
    </div>
</template>
<script setup>
import { useContent } from ".";
import { useLike, useStar } from "~/hooks";
import { ArrowDown, ArrowUp } from "@element-plus/icons-vue";
const { onShare, onPreview, onComment, onMakeSame } = useContent();
const { onLike } = useLike();
const { onStar } = useStar();

const props = defineProps({
    list: {
        type: Array,
        default: () => [],
    },
    gap: {
        type: Number,
        default: 12,
    },
    max: {
        type: [String, Number],
        default: 0,
    },
    type: {
        type: Number,
        default: 1,
    },
    loading: {
        type: Boolean,
        default: false,
    },
});

const isExpand = ref(false);

const renderList = computed(() => {
    if (props.max) {
        return isExpand.value ? props.list : props.list.slice(0, props.max);
    }

    return props.list;
});
</script>
<style lang="scss" scoped>
.product-list {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;

    .product-item {
        width: 288px;
        height: 384px;
        position: relative;

        &:hover {
            z-index: 1;

            .product-content {
                position: absolute;
                left: 0;
                top: 0;
                height: auto;
                box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.11);
                transition: box-shadow 0.5s;

                .product-desc {
                    -webkit-line-clamp: none !important;
                }
            }
        }

        .product-content {
            height: 100%;
            background-color: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
            transition: box-shadow 0.5s;

            &:hover {
                box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.11);
            }

            .product-img {
                position: relative;
                width: 288px;
                height: 238px;
                overflow: hidden;
                cursor: pointer;

                &:hover {
                    .preview {
                        opacity: 1;
                    }
                }

                .review-num {
                    position: absolute;
                    right: 7px;
                    top: 8px;
                    display: flex;
                    align-items: center;
                    color: #fff;
                    font-size: 14px;
                    background-color: rgba(0, 0, 0, 0.3);
                    padding: 6px 7px;
                    border-radius: 4px;

                    img {
                        margin-right: 5px;
                    }
                }

                .cover-img {
                    width: 288px;
                    height: 238px;
                    object-fit: cover;
                    transition: all 0.4s linear;
                }

                .preview {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;

                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, 0.3);
                    opacity: 0;
                    position: absolute;
                    left: 0;
                    top: 0;
                    transition: all 0.4s linear;
                    z-index: 9;

                    :deep(.el-button) {
                        width: 88px;
                    }

                    :deep(.el-button + .el-button) {
                        margin-left: 0;
                        margin-top: 12px;
                    }

                    .btn-plain {
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        width: 88px;
                        height: 32px;
                        border-radius: 4px;
                        border: 1px solid #FFFFFF;
                        font-size: 14px;
                        color: #FEFEFE;
                        margin-bottom: 12px;
                    }
                }
            }

            .product-info {
                padding: 0 12px 9px;

                .product-top {
                    height: 49px;
                    display: flex;
                    align-items: center;
                    border-bottom: 1px solid #dddddd;

                    .product-name {
                        font-size: 18px;
                        font-weight: bold;
                        width: 210px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        padding-left: 17px;
                    }

                    .share-btn {
                        cursor: pointer;
                        width: 20px;
                        height: 20px;
                        margin-left: auto;
                        flex-shrink: 0;
                    }

                    .avatar {
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        cursor: pointer;
                        flex-shrink: 0;
                    }
                }

                .product-middle {
                    display: flex;
                    align-items: center;
                    margin-top: 10px;

                    .icon-group {
                        display: flex;
                        align-items: center;
                        color: #333;
                        font-size: 14px;
                        font-weight: 500;

                        img {
                            margin-right: 4px;
                        }

                        .icon-item {
                            display: inline-flex;
                            align-items: center;
                            margin-right: 20px;

                            &.like-item,
                            &.star-item {
                                cursor: pointer;

                                img {
                                    transition: all 0.2s;
                                }

                                &:active img {
                                    transform: scale(1.3);
                                }
                            }

                            &.view-item {
                                img {
                                    width: 18px;
                                }
                            }

                            &.like-item {
                                img {
                                    width: 18px;
                                }
                            }

                            &.star-item {
                                img {
                                    width: 18px;
                                }
                            }

                            &.comment-item {
                                cursor: pointer;

                                img {
                                    width: 18px;
                                }
                            }

                            &.share-item {
                                img {
                                    width: 18px;
                                }
                            }
                        }
                    }

                    .make-same-btn {
                        margin-left: auto;
                    }
                }

                .product-desc {
                    font-size: 14px;
                    color: #666666;
                    margin-top: 12px;
                    line-height: 24px;
                    min-height: 48px;

                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
            }

            .product-title {
                font-size: 18px;
                color: #333;
            }
        }

    }
}

.see-more {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    color: #5085fb;
}
</style>
